<template>
  <div @touchmove.prevent class="snake-game is-mobile" >
    <VGameLoading v-model="loading" :time="3" @overLoading="startGame"/>
    <canvas class="snake-canvas" id="stage" ref="stageCanvas"></canvas>
    
    <v-gaming-ranking/>
    <!-- 右上角信息板块 -->
    <v-game-info-panel  
      :score="parseInt(gamePlayer.score)"
      :gamePlayer="gamePlayer"
      :gameFps="gameManager && gameManager.gameFps"
      />
    <!-- 左侧移动 -->
    <div id="motionhandler" class="leftSide">
      <div class="buttonWrapper" style="left: 2rem;">
        <button class="MotionControler"></button>
      </div>
    </div>
    <!-- 加速度控制区域 -->
    <VSnakeRightOptionsBtn ref="rightOptionsBtn" :isLoading="loading" @useProp="useProp"/>
    
    <div v-show="gameOverStatus"  ref="gameEndScene" class="cover end-scene" id="game-end-scene">
      <div class="report-board">
        <div class="report-title">游戏结束</div>
        <div class="report-content">
          <table>
            <tr>
              <td>长度</td>
              <td id="snake-length" class="number">333</td>
            </tr>
            <tr>
              <td>击杀</td>
              <td id="snake-kill" class="number">0</td>
            </tr>
          </table>
        </div>
        <div class="option-panel">
          <button class="panel-btn backward" id="backward-btn" @click="goBack">返回</button>
          <button class="panel-btn repeat" id="repeat-btn" @click="repeatGame">重来</button>
          <button class="panel-btn revive" id="revive-btn" @click="revivePlayer">复活</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { GameManager } from '../snake-js/game-manager'
import VGameLoading from '@/components/snake-components/game-loading.vue'
import VSnakeRightOptionsBtn from '@/components/snake-components/right-options-btn.vue'
import VGameInfoPanel from '@/components/snake-components/game-info-panel.vue'
import VGamingRanking from '@/components/snake-components/gaming-ranking/index.vue'
export default {
  name: 'GamePanel',
  components: {
    // HelloWorld
    VGameLoading,
    VSnakeRightOptionsBtn,
    VGameInfoPanel,
    VGamingRanking
  },
  data() {
    return {
      revivePlayerFunc: null,
      snakePlayer: null,
      gameConfig: {
        ctx: null,
        ratio: 1
      },
      actualBounds: null,
      gameManager: null,
      gameOverStatus: false,
      loading: true
    }
  },
  computed: {
    gamePlayer() {
      if(this.gameManager) {
        return this.gameManager.player 
      }
      return {}
    }
  },
  created() { },
  mounted() {
  // this.startGame()
  },
  methods: {
    startGame() {
      this.loading = false
      this.gameOver = false
      this.gameManager = new GameManager({
        canvas: this.$refs.stageCanvas,
        velocityRegion: document.querySelector('#velocityHandler'),
        gameOverFunc: (content) => this.gameOverFunc(content)
      })
      this.gameManager.update()
      this.gameManager.addEventListener()
    },
    goBack() {
      this.gameManager.closeGame()
      this.gameManager = null
      this.$emit('goBack')
    },
    gameOverFunc(content) {
      // 游戏结束， 打开游戏结束弹窗
      this.gameOverStatus = true
    },
    repeatGame() {
      // 重新开始游戏
      this.gameOverStatus = false
      this.gameManager.refresh()
    },
    revivePlayer() {
      this.gameOverStatus = false
      this.gameManager.revivePlayer()
    },
    initGame() {

    },
    useProp(type) {
      if(type == 'shield') {
        this.gameManager.player.setInvincibleStatus(10 * 1000, 'init')
      } else if(type == 'experience') {
        this.gameManager.player.changeScoreCoefficient()
      } else if(type == 'speed') {
        this.gameManager.useSpeedProp(type)
      } else if(type == 'addLength') {
        this.gameManager.useSpeedProp(type)
      }
    }
  }
}
</script>

<style lang="scss">
.snake-game {
  width: 100%;
  height: 100%;
}
</style>